<template>
  <div class="m_bd">
    <ul class="my_order">
      <li>
        <span><i class="iconfont order_pic">&#xe60a;</i>我的订单</span>
        <i class="iconfont order_icon">&#xe603;</i>
      </li>
      <li>
        <span
          ><i class="iconfont order_pic" style="color:orange">&#xe63b;</i
          >积分商城</span
        >
        <i class="iconfont order_icon">&#xe603;</i>
      </li>
      <li>
        <span
          ><i class="iconfont order_pic" style="color:yellow">&#xe60b;</i
          >硅谷外卖会员卡</span
        >
        <i class="iconfont order_icon">&#xe603;</i>
      </li>
      <li>
        <span><i class="iconfont order_pic">&#xe6bb;</i>服务中心</span>
        <i class="iconfont order_icon">&#xe603;</i>
      </li>
      <van-button
        type="danger"
        round
        style="width:100%"
        class="log_out"
        @click="logOut"
        v-if="userInfo._id"
        >退出登录</van-button
      >
    </ul>
  </div>
</template>

<script>
import { reqLogOut } from '../../api/index'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    logOut() {
      // 退出登录对话框
      this.$dialog
        .confirm({
          message: '确认退出登录',
          confirmButtonColor: 'red'
        })
        .then(async () => {
          // 点击确定退出登录
          const res = await reqLogOut()
          if (res.code === 0) {
            this.$store.dispatch('logOutAsync')
          }
        })
        .catch(() => {
          console.log('点击了取消')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.m_bd {
  margin-top: 0.4rem;
  .my_order {
    li {
      height: 1.413333rem;
      width: 100%;
      background-color: #fff;
      line-height: 1.413333rem;
      font-size: 0.426667rem;
      &:last-child {
        margin-top: 0.266667rem;
      }
      .order_pic {
        padding: 0 0.213333rem;
        font-size: 0.5003333rem;
        vertical-align: top;
      }
      .order_icon {
        float: right;
        font-size: 0.666667rem;
      }
    }
  }
}
.log_out {
  font-size: 0.5533333rem;
  height: 1.066667rem;
}
</style>
